<template>
  <div>
    <up-down-layout :header="'字典数据('+ queryParas.type + ')'" :handleFlag="true" >
      <template slot="query">
        <search-form :componentList="componentList" :formValue="queryParas" @handleFilter="handleFilter"
          @clearParam="clearParam">
        </search-form>
      </template>
      <template slot="table">
        <!-- table表格 -->
        <data-table :toolMenuFlag="true" :bizType="bizType" :sourceData="sourceData" :queryParas="queryParas"
          :menuFlag="false" :IsRight="false" @onEditRow="onEditRow" @onCreateRow="addData"
          :operateBtnLayout="operateBtnLayout" :operatWidth="'180px'" :columns="columns" :deleteApi="api" :api="api" :loadCount="loadCount"
          >
        </data-table>
      </template>
    </up-down-layout>
    <!-- 字典数据新增页面 -->
    <addDictdata :editModel="editModel" :visible.sync="dialogVisible" :api="api" :form="item" @handSearch="handleFilter" />
  </div>
</template>
<script>
  import BaseManage from '@/pages/baseManage'
  import upDownLayout from '@/components/element/upDownLayout'
  import searchForm from '@/components/element/searchForm'
  import DataTable from '@/components/element/DataTable'
  import { sysDictDetail } from '@/api/platformApi'
  import { formatDict } from '@/filters/index'
  // 字典数据新增页面
  import addDictdata from '@/pages/systemManage/dictManage/addDictdata'
  export default {
    // 继承baseManage里的公共方法和定义的属性
    extends: new BaseManage(),
    name: 'dictDataManage',
    components: {
      upDownLayout,
      searchForm,
      DataTable,
      addDictdata
    },
    props: {
      // 业务数据的类型
      bizType: {
        type: String,
        default: ''
      }
    },
    watch: {
      bizType (val) {
        this.getType()
      }
    },
    data () {
      return {
        componentList: [
          {
            prop: 'label',
            componentName: 'el-input',
            label: '字典标签：',
            lableWidth: '100px',
            value: 'label'
          }
        ],
        columns: [
          {
            prop: 'label',
            label: '字典标签',
            align: 'center'
          },
          {
            prop: 'type',
            label: '字典键值',
            align: 'center'
          },
          {
            prop: 'updateBy',
            label: '更新人',
            align: 'center'
          },
          {
            prop: 'updateTime',
            label: '更新时间',
            align: 'center'
          },
          {
            prop: 'sort',
            label: '排序号',
            align: 'center',
            width: '80px'
          },
          {
            prop: 'remarks',
            label: '备注信息',
            align: 'center'
          },
          {
            prop: 'description',
            label: '字典描述',
            align: 'center'
          },
          {
            prop: 'updateBy',
            label: '状态',
            align: 'center',
            width: '80px',
            format: row => { return formatDict(row.useable, 'useable') }
          }
        ],
        // 操作列需要显示的按钮
        operateBtnLayout: 'C,E,V,D',
        dictType: ''
      }
    },
    created () {
      this.getType()
    },
    computed: {
      api () {
        return sysDictDetail
      }
    },
    methods: {
      clearParam () {
        for (let i in this.queryParas) {
          if (i !== 'currentPage' && i !== 'currentPageSize' && i !== 'type') {
            this.queryParas[i] = ''
          }
        }
      },
      // 获取要查询的数据字典类型,通过query
      getType () {
        this.queryParas.type = this.bizType
        this.handleFilter()
      },
      // 将字典键值传给弹框
      addData () {
        this.dialogVisible = true
        this.item = {
          type: this.queryParas.type
        }
        this.editModel = 'C'
      },
      // 点击表格操作项的按钮
      onEditRow (rowIndex, rowData, clickType) {
        // 删除后查询一次
        if (clickType === 'D') {
          this.handleFilter()
          return this.$store.dispatch('GetDictionarys', 'reload')
        }
        this.editModel = clickType
        this.dialogVisible = true
        // 查看详情
        if (clickType === 'V') {
          this.item = rowData
        } else if (clickType === 'E') {
          // 编辑数据
          this.item = JSON.parse(JSON.stringify(rowData))
        }
      }
    }
  }
</script>
